<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>位置固定</title>
    <style type="text/css">
        body{
            /*由于body默认有8px的外边距,所以可以把外边距重置为0*/
            margin: 0;            
        }

        header{
            height: 60px;
            margin: 0;
        }

        div{
            background-color: orange;
            /*width: 500px;*/
            width: 100%;
            height: 60px;
            text-align: center;
            line-height: 60px;
            margin: 0 auto;
            /*position: fixed;设置位置固定,
            设置fixed固定之后,元素会脱离当前的布局流,浮在页面的顶部.
            后边的元素会占据fixed之后元素的位置.
            */
            position: fixed;

        }

        section{
            height: 1500px;
            background-color: pink;

        }
    </style>

</head>
<body>   
    <!-- header定义页面的头部信息,比如导航栏等等 -->
    <!-- main标签,用来定义主要内容 -->
    <!-- footer用来定义页面的底部信息 -->
    <header>
        <div>这是一个导航栏</div>        
    </header>

    <!-- br标签代表换行,换行可以使后边的元素往下移,但是距离不好控制 -->

    <section>
        这是页面的主要内容
    </section>
</body>
</html>